<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="d3-tip.css">
</head>
<body>
    
    <script src="d3.min.js"></script>
    <!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
    <script src="d3-tip.js"></script>
    <script>
        
        const svg = d3.select('body').append('svg');
        svg.attr('width',800);
        svg.attr('height',800);
        svg.style('border','2px solid #ccc');


        let x = d3.scaleLinear([10,20],[0,500]).nice();

        const xAxis = d3.axisBottom(x);

        const g = svg.append('g');
        
        // const zoom = d3.zoom()
        //     .scaleExtent([0.5, 2])
        //     .translateExtent([[0,0],[800,800]])
        //     .on('zoom',function(e){
                
        //         //g.attr('transform',d=>e.transform)
        //         console.log("-------------------------");
        //         // console.log('x',e.transform.k,e.transform.x,e.transform.applyX(10));
        //         // console.log('y',e.transform.k,e.transform.y,e.transform.applyY(10));
        //         console.log(x.domain(),x.range())
        //         const xx = e.transform.rescaleX(x)
        //         console.log(xx.domain(),xx.range())
        //         console.log(xx(10),xx(20));
        //         console.log(e.transform.applyX(10),e.transform.applyX(20));
        //         console.log("-------------------------");
        //         g.call(xAxis)
        //     })
        
        g.append('rect')
            .attr('x',0)
            .attr('y',0)
            .attr('width',800)
            .attr('height',800)
            .attr('fill-opacity',0)

        const zoom = d3.zoom()
            .translateExtent([[0,0],[800,800]])
            .on('start',(e,d)=>{
                //console.log('start',e.transform);
            })
            .on('zoom',(e,d)=>{
                console.log('1111');
            //    console.log(100+e.transform.x , e.transform.applyX(100)); 
               rect.transition()
                    .duration(2000)
                   .attr('x',d=>e.transform.applyX(d.x))
                   .attr('y',d=>e.transform.applyY(d.y))
                   .attr('width',d=>e.transform.k * d.width)
                   .attr('height',d=>e.transform.k * d.height) 
            //    console.log(e.transform.rescaleX(x).ticks());
            //console.log(e.transform);
            //console.log(d.x,d.y);
            //console.log(e);
            })
            .on('end',(e,d)=>{
                //console.log('end',e.transform);
            
            })
            
            const data = [{x:0,y:0,width:500,height:500}]
            const rect = g.append('rect')
            .data(data)
            .attr('x',d=>d.x)
            .attr('y',d=>d.y)
            .attr('width',d=>d.width)
            .attr('height',d=>d.height)
        svg.call(zoom)
        svg.on('dblclick.zoom',function(){
            //rect.call(zoom.translateBy,10,20);
            //rect.call(zoom.translateTo,30,30,[0,0])
            //rect.call(zoom.scaleBy,0.5,[800,800])
            //rect.call(zoom.scaleBy,0.8,[800,800])
            // svg.call(zoom.scaleBy,0.5,[400,400])
            // svg.call(zoom.scaleBy,0.5,[400,400])
            // svg.call(zoom.scaleBy,0.5,[400,400])
            
            // svg.call(zoom.scaleTo,0.5,[400,400])
            // svg.call(zoom.scaleTo,0.5,[400,400])
            // svg.call(zoom.scaleTo,0.5,[400,400])

                
            // const transform = d3.zoomIdentity.scale(0.5) ;
            // svg.call(zoom.transform, transform,function(){
            //     console.log(arguments);
            // }) 
            console.log(arguments);
            
        })    
        
    </script>
</body>
</html>